<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Puik - Clean, Minimal E-commerce HTML5 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   <!-- CSS here -->
   <link rel="stylesheet" href="static/css/owl.carousel.min.css">
   <link rel="stylesheet" href="static/css/preloader.css">
   <link rel="stylesheet" href="static/css/animate.min.css">
   <link rel="stylesheet" href="static/css/magnific-popup.css">
   <link rel="stylesheet" href="static/css/meanmenu.css">
   <link rel="stylesheet" href="static/css/animate.min.css">
   <link rel="stylesheet" href="static/css/slick.css">
   <link rel="stylesheet" href="static/css/bootstrap.min.css">
   <link rel="stylesheet" href="static/css/fontawesome-all.min.css">
   <link rel="stylesheet" href="static/css/themify-icons.css">
   <link rel="stylesheet" href="static/css/nice-select.css">
   <link rel="stylesheet" href="static/css/ui-range-slider.css">
   <link rel="stylesheet" href="static/css/main.css">
</head>

<body>

    <!-- preloader start -->
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <svg viewbox="0 0 58 58" id="mustard" class="product">
                <g>
                  <path style="fill:#ED7161;" d="M39.869,58H18.131C16.954,58,16,57.046,16,55.869V12.621C16,11.726,16.726,11,17.621,11h22.757
                    C41.274,11,42,11.726,42,12.621v43.248C42,57.046,41.046,58,39.869,58z"></path>
                  <polygon style="fill:#D13834;" points="35,11 23,11 27.615,0 30.385,0 	"></polygon>
                  <rect x="16" y="16" style="fill:#D75A4A;" width="26" height="2"></rect>
                  <rect x="20" y="11" style="fill:#D75A4A;" width="2" height="6"></rect>
                  <rect x="25" y="11" style="fill:#D75A4A;" width="2" height="6"></rect>
                  <rect x="30" y="11" style="fill:#D75A4A;" width="2" height="6"></rect>
                  <rect x="36" y="11" style="fill:#D75A4A;" width="2" height="6"></rect>
                  <circle style="fill:#D13834;" cx="29" cy="36" r="10"></circle>
                </g>
                </svg>
                <svg viewbox="0 0 49.818 49.818" id="meat" class="product">
                    <g>
                    <path style="fill:#994530;" d="M0.953,38.891c0,0,3.184,6.921,11.405,9.64c1.827,0.604,3.751,0.751,5.667,0.922
                        c7.866,0.703,26.714-0.971,31.066-18.976c1.367-5.656,0.76-11.612-1.429-17.003C44.51,5.711,37.447-4.233,22.831,2.427
                        c-8.328,3.795-7.696,10.279-5.913,14.787c2.157,5.456-2.243,11.081-8.06,10.316C1.669,26.584-1.825,30.904,0.953,38.891z"></path>
                    <g>
                        <path style="fill:#D75A4A;" d="M4.69,37.18c0.402,0.785,3.058,5.552,9.111,7.554c1.335,0.441,2.863,0.577,4.482,0.72l0.282,0.025
                            c0.818,0.073,1.698,0.11,2.617,0.11c18.18,0,22.854-11.218,24.02-16.041c1.134-4.693,0.706-9.703-1.235-14.488
                            C41.049,7.874,36.856,4.229,31.506,4.229c-2.21,0-4.683,0.615-7.349,1.83c-2.992,1.364-6.676,3.921-4.13,10.36
                            c1.284,3.25,0.912,6.746-1.023,9.591c-2.17,3.191-6.002,4.901-9.895,4.39c-0.493-0.065-0.966-0.099-1.404-0.099
                            c-1.077,0-2.502,0.198-3.173,1.143C3.765,32.524,3.823,34.609,4.69,37.18z"></path>
                        <path style="fill:#C64940;" d="M21.184,46.589c-0.948,0-1.858-0.038-2.706-0.114l-0.283-0.025
                            c-1.674-0.147-3.257-0.287-4.706-0.767c-6.376-2.108-9.188-7.073-9.688-8.047l-0.058-0.137c-0.984-2.917-0.993-5.273-0.026-6.635
                            c0.912-1.285,2.89-1.807,5.524-1.456c3.537,0.466,6.959-1.054,8.936-3.961c1.746-2.565,2.082-5.723,0.921-8.661
                            c-3.189-8.065,2.707-10.754,4.645-11.638c9.68-4.407,16.81-1.155,21.152,9.535c2.021,4.981,2.464,10.202,1.28,15.099
                            C44.953,34.836,40.073,46.589,21.184,46.589z M5.613,36.787c0.401,0.758,2.936,5.155,8.503,6.997
                            c1.229,0.406,2.699,0.536,4.256,0.673l0.284,0.025c0.788,0.07,1.639,0.106,2.527,0.106c17.469,0,21.938-10.683,23.048-15.276
                            c1.084-4.487,0.672-9.286-1.19-13.877C40.29,8.663,36.409,5.229,31.506,5.229c-2.067,0-4.4,0.585-6.934,1.74
                            c-3.02,1.376-5.81,3.532-3.615,9.083c1.408,3.563,0.998,7.398-1.126,10.521c-2.404,3.534-6.563,5.386-10.852,4.818
                            c-1.793-0.236-3.197,0.019-3.632,0.632C4.912,32.636,4.756,34.207,5.613,36.787z"></path>
                    </g>
                    <g>
                        <circle style="fill:#E6E6E6;" cx="32.455" cy="12.779" r="4"></circle>
                        <path style="fill:#7A3726;" d="M32.455,17.779c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S35.212,17.779,32.455,17.779z
                            M32.455,9.779c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S34.109,9.779,32.455,9.779z"></path>
                    </g>
                    <path style="fill:#C64940;" d="M25.617,45.684l-1.941-0.479c0.435-1.761-1.063-3.216-3.446-4.859
                        c-2.875-1.984-4.817-5.117-5.327-8.595c-0.186-1.266-0.425-2.285-0.428-2.295l1.922-0.548c0.01,0.028,1.09,3.104,3.978,4.314
                        c2.094,0.877,4.667,0.598,7.648-0.832c11.578-5.554,17.102-2.646,17.332-2.52l-0.967,1.752c-0.04-0.021-4.97-2.48-15.5,2.57
                        c-3.53,1.694-6.662,1.984-9.312,0.863c-0.801-0.339-1.49-0.779-2.078-1.265c0.769,1.974,2.11,3.695,3.867,4.907
                        C23.149,39.931,26.472,42.222,25.617,45.684z"></path>
                    <path style="fill:#C64940;" d="M27.074,27.586c-5.37,0-7.605-3.694-7.633-3.74l1.727-1.01l-0.863,0.505l0.859-0.511
                        c0.108,0.179,2.714,4.335,9.738,2.105c1.54-0.794,12.038-6.002,15.619-2.289l-1.439,1.389c-1.979-2.052-9.229,0.576-13.332,2.714
                        l-0.154,0.064C29.892,27.364,28.389,27.586,27.074,27.586z"></path>
                    </g>
                </svg>
                <svg viewbox="0 0 49 49" id="soda" class="product">
                    <g>
                    <path style="fill:#E22F37;" d="M9.5,27V5.918c0-1.362,0.829-2.587,2.094-3.093l0,0C12.642,2.406,13.5,1.14,13.5,0.011L13.5,0v0
                        l11,0l11,0v0v0.011c0,1.129,0.858,2.395,1.906,2.814l0,0c1.265,0.506,2.094,1.73,2.094,3.093V27v-5v21.082
                        c0,1.362-0.829,2.587-2.094,3.093h0c-1.048,0.419-1.906,1.686-1.906,2.814V49l0,0h-11h-11l0,0l0-0.011
                        c0-1.129-0.858-2.395-1.906-2.814h0c-1.265-0.506-2.094-1.73-2.094-3.093V22"></path>
                    <path style="fill:#F75B57;" d="M18.5,7h-5c-0.553,0-1-0.447-1-1s0.447-1,1-1h5c0.553,0,1,0.447,1,1S19.053,7,18.5,7z"></path>
                    <path style="fill:#F75B57;" d="M35.5,7h-13c-0.553,0-1-0.447-1-1s0.447-1,1-1h13c0.553,0,1,0.447,1,1S36.053,7,35.5,7z"></path>
                    <path style="fill:#994530;" d="M18.5,45h-5c-0.553,0-1-0.447-1-1s0.447-1,1-1h5c0.553,0,1,0.447,1,1S19.053,45,18.5,45z"></path>
                    <path style="fill:#994530;" d="M35.5,45h-13c-0.553,0-1-0.447-1-1s0.447-1,1-1h13c0.553,0,1,0.447,1,1S36.053,45,35.5,45z"></path>
                    <polygon style="fill:#E6E6E6;" points="39.5,32 9.5,42 9.5,20 39.5,10 	"></polygon>
                    <polygon style="fill:#F9D70B;" points="39.5,28 9.5,38 9.5,24 39.5,14 	"></polygon>
                    </g>
                </svg>
                <div class="cart-container">
                    <svg viewbox="0 0 512 512" id="cart">
                    <circle cx="376.8" cy="440" r="55"></circle>
                    <circle cx="192" cy="440" r="55"></circle>
                    <polygon points="128,0 0.8,0 0.8,32 104.8,32 136.8,124.8 170.4,124.8 "></polygon>
                    <polygon style="fill:#ED7161;" points="250.4,49.6 224,124.8 411.2,124.8 "></polygon>
                    <polygon style="fill:#ee5a46;" points="411.2,124.8 224,124.8 170.4,124.8 136.8,124.8 68,124.8 141.6,361.6 427.2,361.6 
                    511.2,124.8 "></polygon>
                    <g>
                        <rect x="166.4" y="185.6" style="fill:#FFFFFF;" width="255.2" height="16"></rect>
                        <rect x="166.4" y="237.6" style="fill:#FFFFFF;" width="166.4" height="16"></rect>
                    </g>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <!-- preloader end -->

    <!-- header area start -->
 <header>
        <div id="header-sticky" class="header-area header-transparent-2">
            <div class="header-main header-main-1 header-main-2 header-main-3 header-padding pl-50 pr-50">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-6 col-sm-4 col-4">
                            <div class="header-left p-rel d-flex align-items-center">
                                <div class="logo pr-55 d-inline-block">
                                    <a href="index.html"><img src="static/picture/logo-black.png" alt="#"></a>
                                </div>
                                <div class="main-menu">
                                    <nav id="mobile-menu">
                                        <ul>
                                            <li><a href="index.html">首页</a>
                                                <ul class="sub-menu">
                                                    <li><a href="index.html">首页一</a>
                                                        <ul class="sub-menu">
                                                            <li><a href="index.html">首页一</a></li>
                                                            <li><a href="index-2.html">首页二</a></li>
                                                            <li><a href="index-3.html">首页三</a></li>
                                                            <li><a href="index-4.html">首页四</a></li>
                                                            <li><a href="index-5.html">首页五</a></li>
                                                            <li><a href="index-6.html">首页六</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="index-2.html">首页二</a></li>
                                                    <li><a href="index-3.html">首页三</a></li>
                                                    <li><a href="index-4.html">首页四</a></li>
                                                    <li><a href="index-5.html">首页五</a></li>
                                                    <li><a href="index-6.html">首页六</a></li>
                                                </ul>
                                            </li>
                                            <li class="static">
                                                <a href="shop-new.html">店铺<i class="icon-arrow-down"></i></a>
                                                <ul class="mega-menu mega-menu-2-col">
                                                   <li class="has-dropdown">
                                                       <a href="shop-new.html">商品页面</a>
                                                       <ul class="has-dropdown">
                                                           <li><a href="shop-new.html">右侧边栏</a></li>
                                                           <li><a href="shop-new.html">左侧边栏</a></li>
                                                           <li><a href="shop-filter-dropdown.html">过滤器下拉</a></li>
                                                           <li><a href="shop-filter-canvas.html">过滤画布</a></li>
                                                           <li><a href="shop-list-v1.html">列表版本一</a></li>
                                                           <li><a href="shop-list-v2.html">列表版本二</a></li>
                                                           <li><a href="shop-masonary.html">砌体布局</a></li>
                                                           <li><a href="shop-tab.html">选项卡布局</a></li>
                                                       </ul>
                                                   </li>
                                                   <li class="has-dropdown">
                                                       <a href="shop-new.html">特征</a>
                                                       <ul class="has-dropdown">
                                                           <li><a href="shop-new.html">过滤器选项</a></li>
                                                           <li><a href="shop-new.html">过滤器区域</a></li>
                                                           <li><a href="shop-new.html">过滤器侧边栏</a></li>
                                                           <li><a href="shop-new.html">加载更多按钮</a></li>
                                                           <li><a href="shop-new.html">无限滚动</a></li>
                                                           <li><a href="shop-new.html">收藏列表</a></li>
                                                           <li><a href="shop-new.html">隐藏搜索</a></li>
                                                           <li><a href="shop-new.html">全屏搜索</a></li>
                                                       </ul>
                                                   </li>
                                                   <li class="d-none d-lg-block">
                                                       <div class="menu-banner-wrapper p-rel">
                                                           <a class="w-img" href="shop-new.html">
                                                               <img src="static/picture/banner-women.jpg" alt="">
                                                           </a>
                                                            <a href="shop-new.html" class="menu-banner-btn">女装</a>
                                                       </div>
                                                   </li>
                                                   <li class="d-none d-xl-block">
                                                       <div class="menu-banner-wrapper p-rel">
                                                           <a class="w-img" href="shop-new.html">
                                                               <img src="static/picture/banner-men.jpg" alt="">
                                                           </a>
                                                            <a href="shop-new.html" class="menu-banner-btn">男装</a>
                                                       </div>
                                                   </li>
                                                </ul>
                                             </li>
                                            <li class="static">
                                                <a href="about-us.html">页面</a>
                                                <ul class="mega-menu mega-full mega-menu-3-col">
                                                    <li class="has-dropdown">
                                                        <a href="product-details.html">产品布局t</a>
                                                        <ul class="has-dropdown">
                                                            <li><a href="product-details.html">产品详情布局1</a></li>
                                                            <li><a href="product-details-v2.html">产品细节布局 2</a></li>
                                                            <li><a href="product-details.html">产品细节布局3</a></li>
                                                            <li><a href="product-details-grid.html">产品详细信息网格</a></li>
                                                            <li><a href="product-details-grid.html">产品详情卷轴</a></li>
                                                            <li><a href="product-details.html">左侧边栏</a></li>
                                                            <li><a href="product-details.html">右侧边栏</a></li>
                                                            <li><a href="product-details.html">侧边栏全高</a></li>
                                                            <li><a href="product-details.html">产品标签附件</a></li>
                                                            <li><a href="product-details.html">产品全宽 ATC</a></li>
                                                            <li><a href="product-details.html">产品全宽布局</a></li>
                                                            <li><a href="product-details.html">高级产品类型热的<span class="menu-tag red">Hot</span></a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="has-dropdown">
                                                        <a href="product-details.html">其他页面</a>
                                                         <ul class="has-dropdown">
                                                            <li><a href="about-us.html">关于我们</a></li>
                                                            <li><a href="">关于我</a></li>
                                                            <li><a href="login.html">登录</a></li>
                                                            <li><a href="register.html">登记</a></li>
                                                            <li><a href="cart.html">大车</a></li>
                                                            <li><a href="wishlist.html">愿望清单</a></li>
                                                            <li><a href="payment-page.html">查看</a></li>
                                                            <li><a href="error.html">404 错误</a></li>
                                                            <li><a href="card.html">礼物卡</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="has-dropdown">
                                                        <a href="product-details.html">产品样本</a>
                                                         <ul class="has-dropdown">
                                                            <li><a href="product-details.html">产品色板</a></li>
                                                            <li><a href="product-details.html">产品图库 色板</a></li>
                                                            <li><a href="product-details.html">产品图片色板</a></li>
                                                            <li><a href="product-details.html">色板颜色</a></li>
                                                            <li><a href="product-details.html">色板色圈</a></li>
                                                            <li><a href="product-details.html">色板简单<span class="menu-tag red">Hot</span></a></li>
                                                            <li><a href="product-details.html">色板简单颜色<span class="menu-tag red">Hot</span></a></li>
                                                        </ul>
                                                    </li>
                                                 </ul>
                                            </li>
                                            <li>
                                                <a href="about-us.html">关于我们</a>
                                                <ul class="sub-menu">
                                                    <li><a href="about-us.html">关于我们</a></li>
                                                    <li><a href="">关于我</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">联系我们</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-8 col-8">
                            <div class="header-right-wrapper d-flex align-items-center justify-content-end">
                                <div class="header-right  d-flex align-items-center justify-content-end">
                                    <a href="login.html" class="d-none d-xxl-inline-block">Login / Register</a>
                                    <div class="header-icon d-inline-block ml-30">
                                        <a href="javascript:void(0)" class="search-toggle d-none d-sm-inline-block"><i class="fal fa-search"></i></a>
                                        <a href="wishlist.html" class="d-none d-xl-inline-block"><i class="fal fa-heart"></i><span>2</span></a>
                                        <button type="button" data-bs-toggle="modal" data-bs-target="#cartMiniModal"><i class="fal fa-shopping-cart"></i><span>2</span></button>
                                    </div>
                                </div>
                                <div class="header-bar ml-20 d-lg-none">
                                    <button type="button" class="header-bar-btn header-bar-btn-black" data-bs-toggle="modal" data-bs-target="#offCanvasModal">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- header area end -->

    <!-- cart mini area start -->
    <div class="cartmini__area">
        <div class="modal fade" id="cartMiniModal" tabindex="-1" aria-labelledby="cartMiniModal" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="cartmini__wrapper">
                    <div class="cartmini__top d-flex align-items-center justify-content-between">
                        <h4>Your Cart</h4>
                        <div class="cartminit__close">
                            <button type="button" data-bs-toggle="modal" data-bs-target="#cartMiniModal" class="cartmini__close-btn"> <i class="fal fa-times"></i></button>
                        </div>
                    </div>
                    <div class="cartmini__list">
                        <ul>
                            <li class="cartmini__item p-rel d-flex align-items-start">
                                <div class="cartmini__thumb mr-15">
                                    <a href="product-details.html">
                                        <img src="static/picture/product-1.jpg" alt="">
                                    </a>
                                </div>
                                <div class="cartmini__content">
                                    <h3 class="cartmini__title">
                                        <a href="product-details.html">Form Armchair Walnut Base</a>
                                    </h3>
                                    <span class="cartmini__price">
                                        <span class="price">1 × $70.00</span>
                                    </span>
                                </div>
                                <a href="#" class="cartmini__remove">
                                    <i class="fal fa-times"></i>
                                </a>
                            </li>
                            <li class="cartmini__item p-rel d-flex align-items-start">
                                <div class="cartmini__thumb mr-15">
                                    <a href="product-details.html">
                                        <img src="static/picture/product-2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="cartmini__content">
                                    <h3 class="cartmini__title">
                                        <a href="product-details.html">Form Armchair Simon Legald</a>
                                    </h3>
                                    <span class="cartmini__price">
                                        <span class="price">1 × $95.99</span>
                                    </span>
                                </div>
                                <a href="#" class="cartmini__remove">
                                    <i class="fal fa-times"></i>
                                </a>
                            </li>
                            <li class="cartmini__item p-rel d-flex align-items-start">
                                <div class="cartmini__thumb mr-15">
                                    <a href="product-details.html">
                                        <img src="static/picture/product-3.jpg" alt="">
                                    </a>
                                </div>
                                <div class="cartmini__content">
                                    <h3 class="cartmini__title">
                                        <a href="product-details.html">Antique Chinese Armchairs</a>
                                    </h3>
                                    <span class="cartmini__price">
                                        <span class="price">1 × $120.00</span>
                                    </span>
                                </div>
                                <a href="#" class="cartmini__remove">
                                    <i class="fal fa-times"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="cartmini__total d-flex align-items-center justify-content-between">
                        <h5>Total</h5>
                        <span>$180.00</span>
                    </div>
                    <div class="cartmini__bottom">
                        <a href="cart.html" class="s-btn w-100 mb-20">view cart</a>
                        <a href="payment-page.html" class="s-btn s-btn-2 w-100">checkout</a>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <!-- cart mini area end -->

    <!-- search area start -->
    <div class="search__area">
        <div class="search__close">
            <button type="button" class="search__close-btn search-close-btn"><i class="fal fa-times"></i></button>
        </div>
        <div class="search__wrapper">
            <h4>Searching</h4>
            <div class="search__form">
                <form action="#">
                    <div class="search__input">
                        <input type="text" placeholder="Search Products">
                        <button type="submit">
                            <i class="far fa-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- search area end -->

    <!-- sidebar area start -->
    <section class="offcanvas__area">
        <div class="modal fade" id="offCanvasModal" tabindex="-1" aria-labelledby="offCanvasModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="offcanvas__wrapper">
                        <div class="offcanvas__top d-flex align-items-center mb-60 justify-content-between">
                            <div class="logo">
                                <a href="index.html">
                                   <img src="static/picture/logo-black.png" alt="logo">
                                </a>
                             </div>
                           <div class="offcanvas__close">
                              <button class="offcanvas__close-btn" data-bs-toggle="modal" data-bs-target="#offCanvasModal">
                                 <svg viewbox="0 0 22 22">
                                    <path d="M12.41,11l5.29-5.29c0.39-0.39,0.39-1.02,0-1.41s-1.02-0.39-1.41,0L11,9.59L5.71,4.29c-0.39-0.39-1.02-0.39-1.41,0
                                    s-0.39,1.02,0,1.41L9.59,11l-5.29,5.29c-0.39,0.39-0.39,1.02,0,1.41C4.49,17.9,4.74,18,5,18s0.51-0.1,0.71-0.29L11,12.41l5.29,5.29
                                    C16.49,17.9,16.74,18,17,18s0.51-0.1,0.71-0.29c0.39-0.39,0.39-1.02,0-1.41L12.41,11z"></path>
                                 </svg>
                              </button>
                           </div>
                        </div>
                        <div class="offcanvas__content p-relative z-index-1">
                           <div class="canvas__menu">
                              <div class="mobile-menu fix"></div>
                           </div>
                           <div class="offcanvas__action mb-15">
                              <a href="login.html">Login</a>
                           </div>
                           <div class="offcanvas__action mb-15 ">
                              <a href="wishlist.html" class="has-tag">
                                 <svg viewbox="0 0 22 22">
                                    <path d="M20.26,11.3c2.31-2.36,2.31-6.18-0.02-8.53C19.11,1.63,17.6,1,16,1c0,0,0,0,0,0c-1.57,0-3.05,0.61-4.18,1.71c0,0,0,0,0,0
                                    L11,3.41l-0.81-0.69c0,0,0,0,0,0C9.06,1.61,7.58,1,6,1C4.4,1,2.89,1.63,1.75,2.77c-2.33,2.35-2.33,6.17-0.02,8.53
                                    c0,0,0,0.01,0.01,0.01l0.01,0.01c0,0,0,0,0,0c0,0,0,0,0,0L11,20.94l9.25-9.62c0,0,0,0,0,0c0,0,0,0,0,0L20.26,11.3
                                    C20.26,11.31,20.26,11.3,20.26,11.3z M3.19,9.92C3.18,9.92,3.18,9.92,3.19,9.92C3.18,9.92,3.18,9.91,3.18,9.91
                                    c-1.57-1.58-1.57-4.15,0-5.73C3.93,3.42,4.93,3,6,3c1.07,0,2.07,0.42,2.83,1.18C8.84,4.19,8.85,4.2,8.86,4.21
                                    c0.01,0.01,0.01,0.02,0.03,0.03l1.46,1.25c0.07,0.06,0.14,0.09,0.22,0.13c0.01,0,0.01,0.01,0.02,0.01c0.13,0.06,0.27,0.1,0.41,0.1
                                    c0.08,0,0.16-0.03,0.25-0.05c0.03-0.01,0.07-0.01,0.1-0.02c0.07-0.03,0.13-0.07,0.2-0.11c0.03-0.02,0.07-0.03,0.1-0.06l1.46-1.24
                                    c0.01-0.01,0.02-0.02,0.03-0.03c0.01-0.01,0.03-0.01,0.04-0.02C13.93,3.42,14.93,3,16,3c0,0,0,0,0,0c1.07,0,2.07,0.42,2.83,1.18
                                    c1.56,1.58,1.56,4.15,0,5.73c0,0,0,0.01-0.01,0.01c0,0,0,0,0,0L11,18.06L3.19,9.92z"></path>
                                 </svg>
                                 <span class="tag">2</span>
                              </a>
                           </div>
                           <div class="offcanvas__action mb-15 d-sm-block">
                              <a href="cart.html" class="has-tag">
                                <i class="far fa-shopping-bag"></i>
                                <span class="tag">4</span>
                              </a>
                           </div>
                           <div class="offcanvas__social mt-15">
                              <ul>
                                 <li>
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                 </li>
                                 <li>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                 </li>
                                 <li>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                 </li>
                                 <li>
                                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                 </li>
                                 <li>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                </div>
            </div>
        </div>
    </section>
    <!-- sidebar area end -->

    <main>


        <!-- page title start -->
        <section class="page__title-area pt-80 pb-65">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xxl-8 col-xl-10">
                        <div class="page__title-wrapper text-center">
                            <span class="page__title-pre">Hi, Puik Store</span>
                            <h3 class="page__title">Gift Card</h3>
                            <p>The most important part of improving at photography has been sharing it. Sign up for an Exposure account, or post regularly to Tumblr, or both. Tell people you’re trying to get better at photography. When you talk about it, other people get excited about it. There are few plugins and apps available for this purpose.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- page title end -->

        <!-- team img start -->
        <div class="card__bg">
            <div class="container-fluid p-0">
                <div class="row gx-0">
                    <div class="col-xxl-12">
                        <div class="card__thumb w-img card__pr-30">
                            <img src="static/picture/card-bg.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- team img start -->

        <!-- card area start -->
        <section class="card__area pt-100 pb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__item text-center">
                            <div class="card__img m-img">
                                <img src="static/picture/card-1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__wrapper card__pl-40">
                            <div class="card__content mt-10">
                                <span>Hello, Our Customer</span>
                                <h3>Platinum Voucher gift card</h3>

                                <p>The perfect way to enjoy brewing tea on low hanging fruit to identify. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. For me, the most important part of improving at photography has been sharing it. Sign up for an Exposure account, or post regularly to Tumblr, or both. Tell people you’re trying to get better at photography. </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- card area end -->

        <!-- card area start -->
        <section class="card__area pb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__wrapper card__pr-30">
                            <div class="card__content mt-10">
                                <span>Hello, Our Customer</span>
                                <h3>Gold Voucher gift card</h3>

                                <p>The perfect way to enjoy brewing tea on low hanging fruit to identify. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. For me, the most important part of improving at photography has been sharing it. Sign up for an Exposure account, or post regularly to Tumblr, or both. Tell people you’re trying to get better at photography. </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__item card__pl-40 text-center">
                            <div class="card__img m-img">
                                <img src="static/picture/card-2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- card area end -->

        <!-- card area start -->
        <section class="card__area pb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__item card__pr-30 text-center">
                            <div class="card__img m-img">
                                <img src="static/picture/card-3.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__wrapper card__pl-40">
                            <div class="card__content mt-10">
                                <span>Hello, Our Customer</span>
                                <h3>Titanium Voucher gift card</h3>

                                <p>The perfect way to enjoy brewing tea on low hanging fruit to identify. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. For me, the most important part of improving at photography has been sharing it. Sign up for an Exposure account, or post regularly to Tumblr, or both. Tell people you’re trying to get better at photography. </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- card area end -->

        <!-- card area start -->
        <section class="card__area pb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__wrapper card__pr-30">
                            <div class="card__content mt-10">
                                <span>Hello, Our Customer</span>
                                <h3>Silver Voucher gift card</h3>

                                <p>The perfect way to enjoy brewing tea on low hanging fruit to identify. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. For me, the most important part of improving at photography has been sharing it. Sign up for an Exposure account, or post regularly to Tumblr, or both. Tell people you’re trying to get better at photography. </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="card__item card__pl-40 text-center">
                            <div class="card__img m-img">
                                <img src="static/picture/card-4.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- card area end -->

        <!-- product modal area start -->
        <div class="product__modal-area modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="product__modal-inner position-relative">
                    <div class="product__modal-close">
                        <button data-bs-dismiss="modal" aria-label="Close">
                            <i class="ti-close"></i>
                        </button>
                    </div>
                    <div class="product__modal-left">
                        <div class="tab-content mb-10" id="productModalThumb">
                            <div class="tab-pane fade show active" id="pro-1" role="tabpanel" aria-labelledby="pro-1-tab">
                                <div class="product__modal-thumb w-img">
                                    <img src="static/picture/product-modal-1.jpg" alt="">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pro-2" role="tabpanel" aria-labelledby="pro-2-tab">
                                <div class="product__modal-thumb w-img">
                                    <img src="static/picture/product-modal-2.jpg" alt="">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pro-3" role="tabpanel" aria-labelledby="pro-3-tab">
                                <div class="product__modal-thumb w-img">
                                    <img src="static/picture/product-modal-3.jpg" alt="">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pro-4" role="tabpanel" aria-labelledby="pro-4-tab">
                                <div class="product__modal-thumb w-img">
                                    <img src="static/picture/product-modal-4.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="product__modal-nav">
                            <ul class="nav nav-tabs" id="productModalNav" role="tablist">
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link active" id="pro-1-tab" data-bs-toggle="tab" data-bs-target="#pro-1" type="button" role="tab" aria-controls="pro-1" aria-selected="true">
                                      <img src="static/picture/product-modal-sm-1.jpg" alt="">
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pro-2-tab" data-bs-toggle="tab" data-bs-target="#pro-2" type="button" role="tab" aria-controls="pro-2" aria-selected="false">
                                    <img src="static/picture/product-modal-sm-2.jpg" alt="">
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pro-3-tab" data-bs-toggle="tab" data-bs-target="#pro-3" type="button" role="tab" aria-controls="pro-3" aria-selected="false">
                                    <img src="static/picture/product-modal-sm-3.jpg" alt="">
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pro-4-tab" data-bs-toggle="tab" data-bs-target="#pro-4" type="button" role="tab" aria-controls="pro-4" aria-selected="false">
                                      <img src="static/picture/product-modal-sm-4.jpg" alt="">
                                    </button>
                                </li>
                              </ul>
                        </div>
                    </div>
                    <div class="product__modal-right">
                        <h3 class="product__modal-title">
                            <a href="product-details.html">Living Room Lighting</a>
                        </h3>
                        <div class="product__modal-rating d-flex align-items-center">
                            <ul class="mr-10">
                                <li>
                                    <a href="#"><i class="ti-star"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="ti-star"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="ti-star"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="ti-star"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="ti-star"></i></a>
                                </li>
                            </ul>
                            <div class="customer-review">
                                <a href="#">(1 customer review)</a>
                            </div>
                        </div>
                        <div class="product__modal-price mb-10">
                            <span class="price new-price">$700.00</span>

                            <span class="price old-price">$899.99</span>
                        </div>
                        <div class="product__modal-available">
                            <p> Availability: <span>In Stock</span> </p>
                        </div>
                        <div class="product__modal-sku">
                            <p> Sku: <span> 0026AG90-1</span> </p>
                        </div>
                        <div class="product__modal-des">
                            <p>Typi non habent claritatem insitam, est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod legunt saepius.…</p>
                        </div>
                        <div class="product__modal-quantity mb-15">
                            <h5>Quantity:</h5>
                            <form action="#">
                                <div class="pro-quan-area d-lg-flex align-items-center">
                                    <div class="product-quantity mr-20 mb-25">
                                        <div class="cart-plus-minus p-relative"><input type="text" value="1"></div>
                                    </div>
                                    <div class="product__modal-cart mb-25">
                                        <button class="product-modal-cart-btn " type="submit">Add to cart</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="product__modal-categories d-flex align-items-center">
                            <span>Categories: </span>
                            <ul>
                                <li><a href="#">Decor, </a></li>
                                <li><a href="#">Lamp, </a></li>
                                <li><a href="#">Lighting</a></li>
                            </ul>
                        </div>
                        <div class="product__modal-categories d-flex align-items-center">
                            <span>Tags: </span>
                            <ul>
                                <li><a href="#">Furniture, </a></li>
                                <li><a href="#">Lighting, </a></li>
                                <li><a href="#">Living Room, </a></li>
                                <li><a href="#">Table</a></li>
                            </ul>
                        </div>
                        <div class="product__modal-share d-flex align-items-center">
                            <span>Share this product: </span>
                            <ul>
                                <li>
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-pinterest-p"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
        <!-- product modal area start -->

        <!-- subscribe area start -->
        <div class="subscribe-area pb-100 gray-bg-2 pt-95">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-12">
                        <div class="section-title text-center">
                            <span class="p-subtitle">OUR NEWSLETTER</span>
                            <h3 class="p-title pb-15 mb-0">join our newsletter</h3>
                            <p class="p-desc  pb-15">Subscribe to the Puik Store mailing list to receive updates on new
                                arrivals, special offers<br>
                                and other discount information.</p>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-xxl-8 col-xl-8">
                        <div class="subscribe-form text-center">
                            <form action="#">
                                <input type="text" placeholder="Your email address...">
                                <button type="submit" class="subscribe-btn subscribe-btn-1">Subscribe</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- subscribe area end -->

        <!-- popup area start -->
        <div class="subscribe-popup d-none">
            <div class="subscribe-wrapper s-popup-padding h-100">
                <div class="pl-75 pr-75">
                    <div class="row">
                        <div class="col-xxl-6">
                            <div class="subscribe-content">
                                <div class="logo mb-65">
                                    <a href="index.html"><img src="static/picture/logo-black.png" alt=""></a>
                                </div>
                                <h4 class="popup-title">Comming Soon</h4>
                                <p class="popup-desc">We’ll be here soon with our new<br> 
                                    awesome site, subscribe to be notified.</p>
                                <div class="comming-countdown  pb-45">
                                    <div class="countdown-inner" data-countdown="" data-date="Mar 02 2024 20:20:22">
                                        <ul>
                                            <li><span data-days="">401</span> Days</li>
                                            <li><span data-hours="">1</span> hours</li>
                                            <li><span data-minutes="">29</span> mins</li>
                                            <li><span data-seconds="">40</span> secs</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="subscribe-form-2 mb-30">
                                    <input type="email" placeholder="Enter your email...">
                                    <button class="p-btn border-0">Subscribe</button>
                                </div>
                                <div class="popup-social">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                    <a href="#"><i class="fal fa-basketball-ball"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div class="subscribe-thumb" data-background="assets/img/popup/subscribe-bg.jpg"></div>
        </div>
        <!-- popup area end -->

</main>

        <!-- footer area start -->
        <footer class="footer-area footer-1  gray-bg-2">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
                        <div class="widget f-widget pb-30 wow fadeInUp" data-wow-delay=".4s">
                            <h5 class="f-widget-title">Information</h5>
                            <ul>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Customer Service</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Page 404</a></li>
                                <li><a href="#">Sizing Guide</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
                        <div class="widget f-widget pb-30 wow fadeInUp" data-wow-delay=".6s">
                            <h5 class="f-widget-title">Our Service</h5>
                            <ul>
                                <li><a href="#">Shipping Policy</a></li>
                                <li><a href="#">Help & Contact Us</a></li>
                                <li><a href="#">Returns & Refunds</a></li>
                                <li><a href="#">Online Stores</a></li>
                                <li><a href="#">Payment Method</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
                        <div class="widget f-widget pb-30  wow fadeInUp" data-wow-delay=".8s">
                            <h5 class="f-widget-title">Payment & Shipping</h5>
                            <ul>
                                <li><a href="#">Terms Of Use</a></li>
                                <li><a href="#">Payment Methods</a></li>
                                <li><a href="#">Shipping Guide</a></li>
                                <li><a href="#">Locations We Ship To</a></li>
                                <li><a href="#">Estimated Delivery Time</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
                        <div class="widget f-widget pb-30 wow fadeInUp" data-wow-delay="1s">
                            <h5 class="f-widget-title">LOOKING FOR Puik?</h5>
                            <address>
                                <ul>
                                    <li>But you can also contact us:</li>
                                    <li>Call Us: S9 Heaven Stress, Beverly Hill, USA.</li>
                                    <li>Phone: +1 (800) 123 456 789</li>
                                    <li>Fax: +1 (800) 123 456 789</li>
                                </ul>
                            </address>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright-area">
                <div class="copyright-text text-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-xxl-12">
                                <p>Opening Time: Mon-Fri: <span>9:00 am – 9:00 pm.</span> <span>Sat: 9:00 am – 6:00 pm.</span> Sun:
                                    9:00 am – 6:00 pm.<br>
                                    Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                                <img src="static/picture/payments.png" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.copyright area end -->
        </footer>
        <!-- footer area end -->

    <!-- JS here -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/waypoints.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/tweenmax.js"></script>
    <script src="static/js/owl.carousel.min.js"></script>
    <script src="static/js/slick.min.js"></script>
    <script src="static/js/jquery-ui-slider-range.js"></script>
    <script src="static/js/jquery.meanmenu.min.js"></script>
    <script src="static/js/isotope.pkgd.min.js"></script>
    <script src="static/js/wow.min.js"></script>
    <script src="static/js/jquery.scrollUp.min.js"></script>
    <script src="static/js/countdown.min.js"></script>
    <script src="static/js/jquery.magnific-popup.min.js"></script>
    <script src="static/js/parallex.js"></script>
    <script src="static/js/imagesloaded.pkgd.min.js"></script>
    <script src="static/js/jquery.nice-select.min.js"></script>
    <script src="static/js/main.js"></script>
</body>

</html>